{extend name="index/index" /}

{block name="main"}

        <!-- Content Block
		================================================== -->

        <div class="sixteen columns">
            <div class="two_third">
                <p><img src="/static/index/images/tiles/attention.png" class="left" style="margin-top:5px;" alt=""/>There are several options that allow you to customize the <strong><em>sortable portfolio module</em></strong>.<br/>You can have the non-selected category items fade out or disappear as seen on this page. The opacity and animation time can of course be changed.</p>
            </div>
            <div class="one_third lastcolumn">
                <h3 class="info">Need A Quote?</h3>
                <div class="lightlabel">Phone.</div>
                <div class="infofield"><a class="linkbg" href="#">800.123.4567</a></div>
                <div class="clear"></div>
                <div class="lightlabel">E-Mail.</div>
                <div class="infofield"><a class="linkbg" href="mailto:info@yourweb.com">info@yourweb.com</a></div>
                <div class="clear"></div>
            </div>
        </div>
        
        <!-- Portfolio Teasers
		================================================== -->
        
        <div class="sixteen columns row divide">
        	<h3 class="titledivider">Our Work.</h3>
            <div class="dividerline"></div>
        </div>
        
        <div class="sixteen columns row portfolio_filter">
        	<ul>
                <li><a class="portfolio_selector" data-group="all-group" href="#">All Projects</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="web-group" href="#">Web Design</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="photoshop-group" href="#">Photoshop</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="concepts-group" href="#">Concepts</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="print-group" href="#">Print Design</a></li>
            </ul>
        </div>
        
		<div class="sixteen columns row teasers_large portfolio">
        
        	<div class="eight columns teaser all-group web-group">
               <a href="#" data-text="» Visit Project" class="hovering"><img src="/static/index/images/thumbs/home_teaser1.jpg" alt="" class="scale-with-grid" /></a>
               <div class="pluswrap">
                   <a href="#" class="bigplus"></a>
                   <div class="topline"><a href="#">Desktopography</a></div>
                   <div class="subline">Web Design</div>
               </div>
            </div>
			<div class="eight columns teaser all-group photoshop-group">
                <a href="#" data-text="» Visit Project" class="hovering"><img src="/static/index/images/thumbs/home_teaser2.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Wurzburg</a></div>
                    <div class="subline">Photoshop</div>
                </div>
            </div>
			<div class="eight columns teaser all-group concepts-group">
                <a href="#" data-text="» Visit Project" class="hovering"><img src="/static/index/images/thumbs/home_teaser3.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Frankfurt</a></div>
                    <div class="subline">Concepts</div>
                </div>
            </div>
            <div class="eight columns teaser all-group print-group">
            	<a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser4.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Amsterdam</a></div>
                    <div class="subline">Print Design</div>
                </div>
            </div>
            <div class="eight columns teaser all-group concepts-group">
               <a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser5.jpg" alt="" class="scale-with-grid" /></a>
               <div class="pluswrap">
                   <a href="#" class="bigplus"></a>
                   <div class="topline"><a href="#">Canberra</a></div>
                   <div class="subline">Concepts</div>
               </div>
            </div>
			<div class="eight columns teaser all-group print-group">
                <a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser6.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Townsville</a></div>
                    <div class="subline">Print Design</div>
                </div>
            </div>
			<div class="eight columns teaser all-group web-group">
                <a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser7.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Dragon Plane</a></div>
                    <div class="subline">Web Design</div>
                </div>
            </div>
            <div class="eight columns teaser all-group photoshop-group">
            	<a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser8.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Nuremberg</a></div>
                    <div class="subline">Photoshop</div>
                </div>
            </div>
            <div class="eight columns teaser all-group concepts-group">
                <a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser9.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">CBCM</a></div>
                    <div class="subline">Concepts</div>
                </div>
            </div>
            <div class="eight columns teaser all-group web-group">
            	<a href="#" data-text="» Visit Project" class="hovering"><img src="images/thumbs/home_teaser10.jpg" alt="" class="scale-with-grid" /></a>
                <div class="pluswrap">
                    <a href="#" class="bigplus"></a>
                    <div class="topline"><a href="#">Munich</a></div>
                    <div class="subline">Web Design</div>
                </div>
            </div>
			
			<div class="clear"></div>
            
		</div>
        
        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
            
	</div><!-- container -->







{/block}